<template>
    <div class="show-pc">
        <div class="img_Card">
            <div class="sort">
                <div v-for="(card, index) in cardList" :key="card.title">
                    <div class="title_box">
                        <div>
                            <img :src="iconEnum[card.type]" :alt="card.title" class="object-contain" />
                        </div>
                        <div class="card_title">{{ card.title }}</div>
                    </div>

                    <div @click="handleToDetail(card)">
                        <sshbImageGroup :width="354" :height="354" :src="card.smallImages" key-val="src"
                            style="border-radius: 6px;">
                        </sshbImageGroup>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="show-wap">
        <div class="img_Card-wap">
            <div class="sort-wap">
                <div v-for="(card, index) in cardList" :key="card.title" class="sort-item-wap">
                    <div class="title_box-wap">
                        <div>
                            <img :src="iconEnum[card.type]" :alt="card.title" class="object-contain-wap" />
                        </div>
                        <div class="card_title-wap">{{ card.title }}</div>
                    </div>
                    <div @click="handleToDetail(card)">
                        <sshbImageGroup :width="860" :height="630" :src="card.smallImages" key-val="src"
                            style="border-radius: 6px;">
                        </sshbImageGroup>
                    </div>
                </div>

            </div>
        </div>
    </div>



</template>

<script setup>
import { ref } from 'vue'
import homeIcon1 from '../../assets/images/new_img/HomeIcfont_1.png'
import homeIcon2 from '../../assets/images/new_img/HomeIcfont_2.png'
import homeIcon3 from '../../assets/images/new_img/HomeIcfont_3.png'
import homeIcon4 from '../../assets/images/new_img/HomeIcfont_4.png'
import homeIcon5 from '../../assets/images/new_img/HomeIcfont_5.png'
import homeIcon6 from '../../assets/images/new_img/HomeIcfont_6.png'
import homeIcon7 from '../../assets/images/new_img/HomeIcfont_7.png'
import sshbImageGroup from '@/sshbComponents/sshbImage/sshbImageGroup.vue';
import iv_1 from "../../assets/images/local_img/IV_1.png"
import iv_2 from "../../assets/images/local_img/IV_2.png"
import iv_3 from "../../assets/images/local_img/IV_3.png"
import iv_4 from "../../assets/images/local_img/IV_4.png"
import iv_5 from "../../assets/images/local_img/IV_5.png"
import iv_6 from "../../assets/images/local_img/IV_6.png"
import iv_7 from "../../assets/images/local_img/IV_7.png"
import iv_8 from "../../assets/images/local_img/IV_8.png"
import iv_9 from "../../assets/images/local_img/IV_9.png"

import { useStore } from '@/store'



const { themeStore } = useStore()
const searchPosition = ref()
const router = useRouter()
const hoverStates = ref([]);
const props = defineProps({
    icon: String,
    title: String,
    mainImage: String,
    smallImages: Array
})

const isHovered = ref(false)

const iconEnum = ref({
    1: homeIcon1,
    2: homeIcon2,
    3: homeIcon3,
    4: homeIcon4,
    5: homeIcon5,
    6: homeIcon6,
    7: homeIcon7,
    8: homeIcon7,
    9: homeIcon7,
    10: homeIcon7
})



const cardList = ref([
    {
        type: 1,
        title: 'VI标准',
        mainImage: iv_1,
        smallImages: [
            { src: iv_1 },
            { src: iv_2 },
            { src: iv_3 },
            { src: iv_4 },
        ]
    },
    {
        type: 2,
        title: '熊猫IP标准',
        mainImage: iv_2,
        smallImages: [
            { src: iv_2 },
            { src: iv_3 },
            { src: iv_4 },
            { src: iv_1 },
        ]
    },
    {
        type: 3,
        title: '品推标准',
        mainImage: iv_3,
        smallImages: [
            { src: iv_3 },
            { src: iv_2 },
            { src: iv_4 },
            { src: iv_1 },
        ]
    },
    {
        type: 4,
        title: '营销类标准',
        mainImage: iv_4,
        smallImages: [
            { src: iv_4 },
            { src: iv_2 },
            { src: iv_3 },
            { src: iv_1 },
        ]
    },
    {
        type: 5,
        title: '企业形象标准',
        mainImage: 'http://gips3.baidu.com/it/u=3775601851,126908675&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
        mainImage: iv_5,
        smallImages: [
            { src: iv_5 },
            { src: iv_2 },
            { src: iv_6 },
            { src: iv_1 },
        ]
    },
    {
        type: 6,
        title: 'A类档期设置',
        mainImage: iv_7,
        smallImages: [
            { src: iv_7 },
            { src: iv_8 },
            { src: iv_6 },
            { src: iv_1 },
        ]
    },
    {
        type: 7,
        title: 'BC类活动设计',
        mainImage: iv_8,
        smallImages: [
            { src: iv_8 },
            { src: iv_2 },
            { src: iv_6 },
            { src: iv_1 },
        ]
    },
    {
        type: 8,
        title: '特别企化设计',
        mainImage: iv_9,
        smallImages: [
            { src: iv_9 },
            { src: iv_2 },
            { src: iv_4 },
            { src: iv_1 },
        ]
    },
    {
        type: 9,
        title: '媒体宣传设计',
        mainImage: iv_8,
        smallImages: [
            { src: iv_8 },
            { src: iv_2 },
            { src: iv_6 },
            { src: iv_1 },
        ]
    },
    {
        type: 10,
        title: '会员及客服',
        mainImage: iv_9,
        smallImages: [
            { src: iv_9 },
            { src: iv_2 },
            { src: iv_4 },
            { src: iv_1 },
        ]
    }


]);

watch(() => {
    searchPosition.value = themeStore.searcShow.visible
})




// 初始化 hover 状态
hoverStates.value = new Array(cardList.value.length).fill(false);


const handleMouseEnter = (index) => {
    hoverStates.value[index] = true;
};

const handleMouseLeave = (index) => {
    hoverStates.value[index] = false;
};
const handleToDetail = (item) => {
    Object.assign(themeStore.searcShow, {
        visible: searchPosition.value,
        txet: item.title, //这是搜索框文字
        title: item.title
    });

    router.push({
        path: `/standardPath/`,
    });



}




</script>
<style lang="less" scoped>
.img_Card {
    width: 95.83333333333334vw;
    margin: 0 auto;




    .sort {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8vw;

        .title_box {
            margin-top: 3.12vw;
            margin-bottom: 1.40vw;
            display: flex;
            align-items: center;
            gap: 0.67vw;
            cursor: pointer;

            .object-contain {
                width: 1.14vw;
                height: 0.98vw;
                font-weight: 500;
                cursor: pointer;
            }

            .card_title {
                font-size: 0.83vw;
                color: #999999;
                cursor: pointer;

            }
        }
    }



}

.img_Card-wap {
    width: 95%;
    height: auto;
    margin: 0 auto;





    .sort-wap {
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;



        .sort-item-wap:last-child {
            margin-top: auto;
            padding-bottom: 100px;
        }

        .sort-item-wap {
            width: 48%;

        }

        .title_box-wap {
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 13px;

            .card_title-wap {
                font-size: var( --text-16px);
                color: #999999;

            }

            .object-contain-wap {
                width: 20px;
                height: 20px;
                font-weight: 500;
            }
        }


    }





}
</style>
